import React from 'react';
import 'antd/dist/antd.css'
import { Input , Button , List } from 'antd'
const TodoListUi =(props) =>{
    return (
        <div style={{margin:'10px'}}>
            <div>
                <Input placeholder='write someting' onChange={props.changeInputValue} style={{ width:'250px', marginRight:'10px'}}/>
                <Button type="primary" onClick={props.addItem}>增加</Button>
            </div>
            <div style={{margin:'10px',width:'300px'}}>
                <List
                    bordered
                    dataSource={props.list}
                    renderItem={(item,index)=>(<List.Item>{item} <span onClick={
                        ()=>{props.deleteItem(index)}
                    }>X</span></List.Item>)}
                />    
            </div>
        </div>
    );
}

export default TodoListUi;